<!-- 简单检索 -->
<template>

  <el-form :inline="true" :model="dataForm">
    <el-row>
      <el-col :offset="5" :span="5">
        <el-form-item label="检索字段：" prop="field">
          <el-select v-model="dataForm.field" placeholder="检索字段">
            <el-option
              v-for="fielditem in queryfield"
              :key="fielditem.value"
              :label="fielditem.label"
              :value="fielditem.value"
              @click.native="changequerytxt(fielditem)"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col v-if="dataForm.txtcount===1" :span="5">
        <el-form-item label="检索内容：">
          <el-date-picker
            v-if="dataForm.inputtype==='date'"
            v-model="dataForm.value1"
            type="date"
            placeholder="检索日期"
          />
          <el-select v-else-if="dataForm.inputtype==='select'" v-model="dataForm.value1" placeholder="请选择检索内容">
            <el-option
              v-for="item in selectcontent"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-else v-model="dataForm.value1" placeholder="检索内容" />

        </el-form-item>
      </el-col>
      <div v-else>
        <el-col v-if="dataForm.inputtype==='date'" :span="7">
          <el-form-item label="检索内容：">
            <el-date-picker
              v-model="dataForm.daterange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col v-else :span="9">
          <el-form-item label="检索起始值：">
            <el-input v-model="dataForm.value1" placeholder="检索起始值" />
          </el-form-item>
          <el-form-item label="检索终止值：">
            <el-input v-model="dataForm.value2" placeholder="检索终止值" />
          </el-form-item>
        </el-col>
      </div>

      <el-col :span="4">
        <el-form-item>
          <el-button size="mini" type="primary" @click="onSearch('btn')">查询</el-button>
          <div class="abtn" @click="todelete()"><a>批量删除</a></div>
          <div class="abtn" @click="toadd()"><a>增加</a></div>
          <div class="abtn" @click="openAdvanceSearch()"><a>高级检索</a></div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

</template>

<script>
import { selectgroup } from '@/api/selectdata.js'
import { newdirect } from '@/utils/redirect.js'
export default {
  props: {
    queryfield: { // 具体检索字段 由使用该组件的页面传过来
      type: Array,
      default: () => []
    },
    dataForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectcontent: [] // 这个是一个动态变化的select值
    }
  },
  methods: {
    onSearch(type) {
      const querydata = {
        isReverse: false, // 简单检索没有整体取反
        condition: [ // 高级检索这里有很多个对象
          {
            ...this.dataForm,
            relation: 'in', //   简单查询只有in包含，(eq、st、in、ed)
            logic: ''// 简单查询传空
          }
        ]
      }
      this.$emit('onSearch', querydata, type)
    },
    openAdvanceSearch() {
      this.$emit('openAdvanceSearch')
    },
    changequerytxt(fielditem) { // 检索字段:不同检索字段，显示不同输入组件
      this.dataForm.value1 = ''
      this.dataForm.value2 = '' // 每次先清空原值
      this.dataForm.type = fielditem.type // 是C  N...
      this.dataForm.txtcount = (fielditem.txtType === 1) ? 1 : 2 // 控制显示几个文本框
      this.dataForm.inputtype = fielditem.inputtype// 控制展示什么类型的input组件
      this.selectcontent = selectgroup[this.dataForm.field]
    },
    toadd() {
      /* 跳转页面*/
      newdirect(this, 'authorManagement/add')
    },
    todelete() {
      this.$emit('todelete')
    }

  }
}
</script>

<style scoped lang="scss">
.abtn{
  float:right;
  padding:5px;
  font-size: 12px;
  text-decoration:underline
}
</style>

